
% if any(files):
<center>
<button id="clear-plot-button">Clear Plot</button>
<br><br>
<div id="hold-button-set">
    <input name="hold" type="radio" id="hold-on-button" /><label for="hold-on-button">Hold on</label>
    <input name="hold" type="radio" id="hold-off-button" checked="checked" /><label for="hold-off-button">Hold off</label>    
</div>
<br>
<button id="display-expr-button">Set Display Expression</button>
<br><br>
</center>

<style type="text/css">
.display-block-header { color: white; font-weight: bold; padding: 7px; background-color: #1679a9; width: 95%;}
.display-block-header-right { float: right; padding: 5px; cursor: pointer; }
.display-files { overflow: scroll; overflow-x: hidden; height: 300px; text-align: center; width: 100%; }
</style>

% for i, file in enumerate(files):
  % if file:
    <div class="display-block-header">
      File ${i+1}
      % if i == len([f for f in files if f]) - 1:
        <span class="display-block-header-right" id="close-file-button">&#215;</span>
      % endif
      <span class="display-block-header-right" onclick="$('#file${i+1}').slideToggle('fast');">+</span>     
    </div>

    <div id="file${i+1}" class="display-files">
      % for var_name, var_nlevs, var_dims, var_descrip in [ (v+[None])[:4] for v in file]:
        <button id="file${i+1}-${var_name}-button" style="width: 100%; font-size: 12px; text-align: left; border-radius: 5px;">
          <strong>${var_name}</strong><br>
            % if var_nlevs >= 2:				
              [${var_nlevs} levels]
            % endif
            ${var_descrip}
        </button>
      % endfor
    </div>
  <br>
  % endif

% endfor

% else:
    No files open.
% endif

